<template>
	<view class="">
		<view class="contractinfo">
			<view class="constatus">
				<view class="con_status" v-if="info.check_status == 0">
					待审核
				</view>
				<view class="con_status" v-if="info.check_status == 1">
					审核中
				</view>
				<view class="con_status" v-if="info.check_status == 2">
					审核通过
				</view>
				<view class="con_status warnstatus" v-if="info.check_status == 3">
					审核未通过
				</view>
				<view class="con_status warnstatus" v-if="info.check_status == 4">
					已撤回
				</view>
			</view>
			<view class="nameli">{{info.num?info.num:''}}</view>
			<view class="content">仓库：{{info.warehouse?info.warehouse.name:''}}</view>
			<view class="content">出库日期：{{info.createtime?info.createtime:''}} </view>
			<view class="content">负责人：{{info.owner_staff?info.owner_staff.name:''}} </view>
		</view>
		<view class="btnlist" v-if="payment_approval.is_check == 1">
			<view class="btn refuse" @click="toExamine(2)">审核拒绝</view>
			<view class="btn pass" @click="toExamine(1)">审核通过</view>
		</view>
		
		<!-- 标签栏 -->
		<view class="tabwarp">
			<scroll-view scroll-x="true" style="width:750rpx;">
				<view class="tablist_new_list">
					<view class="tabtn" @click="changeTab(0)" :class="{'tabtn_active':active == 0}">详细信息</view>
					<view class="tabtn" @click="changeTab(1)" :class="{'tabtn_active':active == 1}">产品信息</view>
				</view>
			</scroll-view>
			
			<!-- 跟进记录 -->
			<scroll-view scroll-y="true" class="scrollbox" v-if="active == 0">
				<base-info v-if="info.id" :info="info" :payment_approval="payment_approval"></base-info>
			</scroll-view>
			<!-- 基本信息 -->
			<scroll-view scroll-y="true" class="scrollbox" v-if="active == 1">
				<product-detail v-if="info.id" :info="info" ></product-detail>
			</scroll-view>
		</view>
		
		<view style="height:100rpx;"></view>
		<!-- 底部导航栏 -->
		<view class="bottom_nav" @click="toRecall" v-if="info.check_status == 0 || info.check_status == 1">
			<view class="">撤回审核</view>
		</view>
		<view class="bottom_nav" @click="toEdit" v-if="info.check_status == 3 || info.check_status == 4">
			<view class="">编辑</view>
		</view>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/api/http.js'
	import { netApprovalDetail, netGoodDetail, netReturnGoods } from '@/api/api.js'
	import baseInfo from './baseInfo.vue'
	import productDetail from './productDetail.vue'
	
	export default{
		components:{
			baseInfo,
			productDetail
		},
		data() {
			return{
				BASE_IMG_URL:BASE_IMG_URL,
				id:'',
				info:{},
				payment_approval:{},
				active:0,
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getDetail()
			this.getApprovalList()
		},
		methods:{
			changeTab(type) {
				this.active = type
			},
			getDetail() {
				netGoodDetail({id:this.id}).then(res=>{
					res = res.data
					this.info = res
				})
			},
			getApprovalList() {
				let params = {
					type: 'outstock',
					relation_id: this.id
				}
				netApprovalDetail(params).then(res=>{
					this.payment_approval = res.data
				})
			},
			change(index) {
				this.current = index;
			},
			//编辑
			toEdit() {
				uni.navigateTo({
					url:'/pagesB/goods/editGoods?id='+this.id,
				})
			},
			//审核
			toExamine(status) {
				uni.navigateTo({
					url:'/pages/template/examine?status='+status+'&id='+this.id+'&type=outstock'
				})
			},
			//撤回审核
			toRecall() {
				uni.showModal({
					title:'提示',
					content:'请确认是否撤回审核?',
					complete:(res=>{
						if(res.confirm){
							netReturnGoods({id:this.id}).then(data=>{
								uni.showToast({
									title:data.res,
									icon:'none'
								})
								setTimeout(()=>{
									this.getDetail()
									this.getApprovalList()
								},2000)
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabwarp{
		border-top:1rpx solid #f5f5f5;
		border-bottom:1rpx solid #f5f5f5;
	}
	.scrollbox{
		width:100%;
		height:calc(100vh - 100rpx);
		background:#f5f5f5;
	}
	//tab栏
	.tablist_new_list{
		width:750rpx;
		padding:24rpx 10rpx;
		display: flex;
		justify-content: space-around;	
		align-items: center;
		border-bottom:1rpx solid #f5f5f5;
		background:#fff;
		.tabtn{
			flex-shrink: 0;
			width:170rpx;
			text-align: center;
			font-size:26rpx;
			color:#999;
			padding-bottom:20rpx;
			position: relative;
			&::after{
				content:'';
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				bottom:0;
				width:80rpx;
				height:10rpx;
				background:#fff;
				border-radius: 10rpx;
			}
		}
		.tabtn_active{
			width:170rpx;
			text-align: center;
			font-size:26rpx;
			color:#333;
			padding-bottom:20rpx;
			position: relative;
			&::after{
				content:'';
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				bottom:0;
				width:80rpx;
				height:10rpx;
				background:$uni-btn-bg-color;
				border-radius: 10rpx;
				opacity: 0.5;
			}
		}
	}
	.contractinfo {
		background: $uni-color-primary;
		padding: 20rpx 42rpx;
		position: relative;
	
		.constatus {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			background: #fff;
			padding: 5rpx 12rpx;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: black;
			.con_status{
				color:$uni-color-primary;
			}
		}
		.nameli {
			margin-bottom: 24rpx;
			font-size: 32rpx;
			color: #fff;
			font-size: 36rpx;
			font-weight: 600;
		}
		.content {
			font-size: 30rpx;
			color: #fff;
			margin: 15rpx 0;
			span{
				color:$uni-color-primary;
			}
		}
	}
	.scrollView {
		height: 140rpx;
		margin-bottom: 50rpx;
		margin-top: 50rpx;
		.scrollbox{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.scrollView_item {
			width: 190rpx;
			height: 140rpx;
			background: #fff;
			border-radius: 20rpx;
			text-align: center;
			margin-right: 28rpx;
	
			:first-child {
				height: 80rpx;
				width: 200rpx;
				color: $uni-color-primary;
				font-size: 54rpx;
				font-weight: 600;
				line-height: 80rpx;
			}
	
			:last-child {
				height: 60rpx;
				width: 200rpx;
				font-size: 30rpx;
				color: #333;
			}
	
		}
	}
	.group_tab {
		margin: 20rpx 0;
	}
	.bottom_nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 0;
		background-color: #fff;
		text-align: center;
		color: $uni-text-color;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9;
		border-top:1rpx solid #f5f5f5;
	}
	.pull_head{
		font-size: 34rpx;
		color: #999;
		padding: 30rpx 0;
		text-align: center;
	}
	.pull_con {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0 100rpx;
	}
	.btnlist {
		padding: 20rpx 24rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #DDDDDD;
		background: #fff;
	
		.btn {
			width: 300rpx;
			height: 60rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
		}
	
		.pass {
			background: $uni-color-primary;
		}
	
		.refuse {
			background: #F43F3B;
		}
	}
</style>